<template>
  <div class="index">
    <div class="zzc"></div>
    <div class="box">
      <van-tabs title-active-color="rgb(243,87,73)">
        <van-tab title="密码登录">
          <van-form @submit="doLogin">
            <!-- 
                            rules表单验证  required 验证规则 不能为空 message验证失败的提示信息 
                            name 就是输入框表单名称
                        -->
            <van-field
              v-model="username"
              name="account"
              label="账号"
              left-icon="user-o"
              placeholder="请输入账号"
            />
            <van-field
              v-model="password"
              left-icon="lock"
              name="password"
              type="password"
              label="密码"
              placeholder="请输入密码"
            />

            <p class="wangji">
              <van-icon name="question-o" /> <span>忘记密码</span>
            </p>
            <div style="margin: 16px">
              <van-button
                block
                color="linear-gradient(to right, #ff6034, #ee0a24)"
                type="info"
                native-type="submit"
                round
                >登录</van-button
              >
            </div>
            <p class="zhuce">没有账号? <span>立即注册</span></p>
          </van-form>
        </van-tab>
        <van-tab title="手机登录">
          <van-form @submit="mobileLogin">
            <!-- 
                            rules表单验证  required 验证规则 不能为空 message验证失败的提示信息 
                            name 就是输入框表单名称
                        -->
            <van-field
              v-model="phone"
              name="phone"
              label="手机号"
              left-icon="user-o"
              placeholder="请输入手机号"
              :rules="[
                {
                  required: true,
                  message: '请输入正确的手机号',
                  pattern: /^1[345678]\d{9}$/
                }
              ]"
            />
            <van-field
              v-model="captcha"
              left-icon="lock"
              name="captcha"
              type="text"
              label="验证码"
              placeholder="输入验证码"
            >
              <template v-slot:button>
                <van-button
                  v-if="showBtn"
                  type="warning"
                  @click="send"
                  size="small"
                  native-type="button"
                  class="yzm"
                  >发送验证码</van-button
                >
                <van-badge v-if="!showBtn">
                  <template #content>
                    <span>{{ countDown }}</span>
                  </template>
                </van-badge>
              </template>
            </van-field>
            <p class="wangji">
              <van-icon name="question-o" /> <span>忘记密码</span>
            </p>
            <div style="margin: 16px">
              <van-button
                block
                color="linear-gradient(to right, #ff6034, #ee0a24)"
                type="info"
                native-type="submit"
                round
              >
                登录
              </van-button>
            </div>
            <p class="zhuce">没有账号? <span>立即注册</span></p>
          </van-form>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<script>
export default {
  name: "Cart",
  data() {
    return {
      username: "",
      password: "",
      key: "",
      phone: "",
      captcha: "",
      showBtn: true,
      countDown: 60,
      publicPath: process.env.BASE_URL //获取当前环境变量里面 Base_URL public路径下.
    };
  },
  created() {
    this.axios.get("/api/verify_code").then(d => {
      this.key = d.data.data.key;
    });
  },
  components: {},
  methods: {
    doLogin(values) {
      //name=>value
      // console.log(values);
      //去服务器端登录
      this.$axios.post("api/login", values).then(d => {
        if (d.data.status != 200) {
          // this.$toast("账号或密码错误登录!失败");
          this.$dialog.alert({
            title: "登录失败",
            message: "账号或密码错误登录!失败"
          });
          return;
        }
        this.$store.commit("setToken", d.data.data.token);
        this.$store.dispatch("getUser");
        // console.log(this.$route.query.path);

        setTimeout(() => {
          this.$router.push(this.$route.query.path);
        }, 500);
      });
    },
    send() {
      if (this.phone) {
        this.axios
          .post("api/register/verify", {
            key: this.key,
            phone: this.phone,
            type: "login"
          })
          .then(d => {
            if (d.data.status == 200) {
              this.showBtn = false;
              this.$toast("验证码发送成功!请输入验证码!");
            } else {
              this.$dialog.alert({
                title: "发送失败",
                message: d.data.msg
              });
            }
          });
      } else {
        this.$dialog.alert({
          title: "发送失败",
          message: "手机号不能为空..."
        });
      }
    },
    mobileLogin(values) {
      //验证....
      this.axios.post("/api/login/mobile", values).then(d => {
        if (d.data.status == 200) {
          this.$toast("登录成功!");
          this.$store.commit("setToken", d.data.data.token);
          document.cookie = `token=${d.data.data.token}`;
          this.$store.dispatch("getUser");
          setTimeout(() => {
            this.$router.push(this.$route.query.path);
          }, 500);
        } else {
          this.$dialog.alert({
            title: "登录失败!",
            message: d.data.msg
          });
        }
      });
    }
  }
};
</script>
<style scoped lang="less">
.zhuce {
  font-size: 0.35rem;
  color: rgb(204, 204, 204);
  span {
    color: rgb(252, 65, 65);
  }
}

.wangji {
  text-align: right;
  font-size: 0.35rem;
  margin: 10px 0;
  span {
    vertical-align: middle;
  }
  .van-icon {
    vertical-align: middle;
  }
}

.zzc {
  width: 100vw;
  height: 100vh;
  animation: colorswitch 20s infinite;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0.8;
}

.van-tab__text,
.van-cell__title span {
  font-size: 0.3rem;
}

@keyframes colorswitch {
  0% {
    background: #0087c9;
  }

  16% {
    background: #ef4a53;
  }

  32% {
    background: #ffb463;
  }

  49% {
    background: #33d5d4;
  }

  65% {
    background: #3ef097;
  }

  81% {
    background: #f7eb47;
  }

  100% {
    background: #0087c9;
  }
}

.box {
  width: 80vw;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(50%);
  background: white;
  padding: 10px;
  box-sizing: border-box;
  border-radius: 20px;
  z-index: 9;
  .van-form {
    .van-cell {
      margin: 0.2rem 0;
      border-radius: 0.2rem;
    }
  }
}
.yzm {
  width: 2rem;
  font-size: 0.2rem;
}
</style>
